{% extends "stocksys/base/base_page.html" %}
{% load staticfiles %}
{% block headscript %}
{% endblock %}
{% block content %}
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="content">
                            <h4 class="title">消息列表<span><a href="{% url 'stocksys:send_message' %}">发送消息</a></span></h4>
                            <div class="table-responsive">
                                <table class="table">

                                    <thead class="text-primary">
                                    <tr>
                                        <th class="text-center">消息ID</th>
                                        <th class="text-center">发送者</th>
                                        <th class="text-center">标题</th>
                                        <th class="text-center">已读</th>
                                        <th class="text-center">发送时间</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for message in messages %}
                                        <tr id="message-{{ message.id }}">
                                            <td class="text-center">{{ message.id }}</td>
                                            <td class="text-center">{{ message.send_user }}</td>
                                            <td class="text-center">{{ message.title }}</td>
                                            <td id="is_read-{{ message.id }}"
                                                class="text-center">{{ message.is_read }}</td>
                                            <td class="text-center">{{ message.create_time | date:'Y-m-d H:i:s' }}</td>
                                            <td class="td-actions text-center">
                                                <a href="{% url 'stocksys:user_message_content' id=message.id %}"
                                                   rel="tooltip" title="查看详情"
                                                   class="btn btn-success btn-simple btn-xs">
                                                    <i class="ti-eye"></i>
                                                </a>
                                                <p id="{% url 'stocksys:user_message_content' id=message.id %}"
                                                   onclick="is_read(this,'{{ message.id }}')"
                                                   rel="tooltip" title="设为已读"
                                                   class="btn btn-success btn-simple btn-xs">
                                                    <i class="ti-notepad"></i>

                                                </p>
                                                <p id="{% url 'stocksys:user_message_content' id=message.id %}"
                                                   onclick="remove(this,'{{ message.id }}')" href="#" rel="tooltip"
                                                   title="删除消息"
                                                   class="btn btn-danger btn-simple btn-xs">
                                                    <i class="ti-close"></i>
                                                </p>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block pagescript %}
    <script type="text/javascript">
        function is_read(object, message_id) {
            var action_data = {"action": "is_read", "value": true};
            send_action(action_data, object.id, message_id)
        }

        function remove(object, message_id) {
            var action_data = {"action": "remove"};
            send_action(action_data, object.id, message_id);
        }

        function send_action(action_data, url, message_id) {
            var token = $.cookie('csrftoken');
            $.ajax({
                url: url,
                type: "POST",
                data: action_data,
                headers: {'X-CSRFToken': token},
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    switch (action_data['action']) {
                        case 'remove':
                            $("#message-" + message_id).remove();
                            break;
                        case 'is_read':
                            if (action_data['value'] === true) {
                                $("#is_read-" + message_id).html('True');
                            } else {
                                $("#is_read-" + message_id).html('False');
                            }
                            break;
                        default:
                            break;
                    }
                },
                error: function (e) {
                    console.log(e);
                }
            });
        }
    </script>
{% endblock %}

